<script setup lang="ts">
  import { useForm } from '@/hooks/arco/useForm';
  import { useModeModalBinder } from '@/hooks/arco/useModeModalBinder';
  import { edit } from '@/api/system/dict';

  const form = useForm({
    state: {
      stateId: '',
      code: '',
      memo: '',
      orders: 1,
      stateLabel: '',
      stateValue: '',
      style: '',
      iconUrl: '',
    },
    rules: {
      orders: [{ required: true, message: '请输入顺序' }],
    },
  });

  const editModal = useModeModalBinder({
    modes: ['edit'],
    onShow(mode, otherParams) {
      form.setFieldsValue(otherParams);
    },
    async onOkClick() {
      await form.validate();
      return edit(form.state);
    },
  });

  defineExpose(editModal.expose);
</script>

<template>
  <a-modal v-bind="editModal.bindProps">
    <a-form v-bind="form.bindProps">
      <a-form-item label="Code" field="code">
        <a-input v-model="form.state.code" readonly />
      </a-form-item>
      <a-form-item label="Label" field="label">
        <a-input v-model="form.state.stateLabel" readonly />
      </a-form-item>
      <a-form-item label="Value" field="value">
        <a-input v-model="form.state.stateValue" readonly />
      </a-form-item>
      <a-form-item label="Memo" field="memo">
        <a-input v-model="form.state.memo" readonly />
      </a-form-item>
      <a-form-item label="样式" field="style">
        <a-input v-model="form.state.style" />
      </a-form-item>
      <a-form-item label="图标" field="icon">
        <a-input v-model="form.state.iconUrl" />
      </a-form-item>
      <a-form-item label="顺序" field="orders">
        <a-input-number v-model="form.state.orders" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style lang="less" scoped></style>
